<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <!--<button id="redraw">更换数据源</button>-->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class="">基本接收管理</h5>
                    <div class="stayRight ">
                        <el-button class="msgReceivedBn"><router-link  :to="'/msg/receiver/'">消息接收人管理</router-link></el-button>
                    </div>
                </div>
            </section>

            <div class="divMain">
              <el-table class="thead">
                 <el-table-column label="消息类型"></el-table-column>
                 <el-table-column label="消息接收人"></el-table-column>
                 <el-table-column label="站内"></el-table-column>
                 <el-table-column label="邮箱"></el-table-column>
                 <el-table-column label="短信"></el-table-column>
                 <el-table-column label="操作"></el-table-column>
              </el-table>
              <div style="position:relative;" v-for="(item,index) in confs" :key="index">
                 <div class="divTitle">{{item.type}}</div>
                 <el-table :data="item.data" border style="width: 100%" :show-header=false>
                   <el-table-column prop="title" label="类型"></el-table-column>
                   <el-table-column prop="conf.receiverNames" label="接收人"></el-table-column>
                   <el-table-column label="站内">
                     <template scope="scope">
                        <el-checkbox :checked="item.data[scope.$index].conf.isWeb"  @change="baseConfModify(scope.$index, item.data, 'web')"></el-checkbox>
                      </template>
                    </el-table-column>
                   <el-table-column label="邮箱">
                     <template scope="scope">
                        <el-checkbox :checked="item.data[scope.$index].conf.isEmail"  @change="baseConfModify(scope.$index, item.data, 'email')"></el-checkbox>
                      </template>
                    </el-table-column>
                    <el-table-column label="手机">
                     <template scope="scope">
                        <el-checkbox :checked="item.data[scope.$index].conf.isPhone" @change="baseConfModify(scope.$index, item.data, 'phone')"></el-checkbox>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                     <template scope="scope">
                       <el-button  size="small"  type="text"   @click="toBaseConfReceiver(scope.$index, item.data)">修改</el-button>
                     </template>
                   </el-table-column>
                    
                 </el-table>
              </div>
            </div>

            <el-dialog title="修改消息接收人" :visible.sync="creatDialogVislble" class="customDialog team" :lock-scroll="false">
                <el-table ref="modifyTable" :data="receivers" border style="width: 100%" @selection-change="handle2SelectionChange" class="modifyTable">
                    <el-table-column type="selection" width="55"></el-table-column>>
                    <el-table-column prop="name" label="姓名" > </el-table-column>
                    <el-table-column prop="email" label="邮箱" > </el-table-column>
                    <el-table-column prop="phone" label="手机" > </el-table-column>
                    <el-table-column prop="remark" label="备注" > </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="creatDialogVislble = false">取 消</el-button>
                    <el-button type="primary" @click="baseConfReceiverModify('receivers')" :disabled="saveDisabled">保存</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { baseConfList, toBaseConfReceiver, baseConfReceiverModify, baseConfModify } from '@/api/msgCenterData'
export default {
  data() {
    return {
      dataArr: null,
      monitorTitle: '',
      listLoading: true,
      pdisabled: true,
      creatDialogVislble: false,
      confId: null,
      multipleSelection: [],
      multiple2Selection: [],
      receivers: [],
      confs: [],
      saveDisabled: false
    }
  },
  created() {
    this.baseConfList()
  },
  methods: {
    baseConfList() {
      var listQuery = { }
      baseConfList(listQuery).then(response => {
        this.confs = response.data
      })
    },
    toBaseConfReceiver(index, data) {
      var _self = this
      this.creatDialogVislble = true
      this.confId = data[index].conf.id
      var listQuery = { id: this.confId }
      toBaseConfReceiver(listQuery).then(response => {
        this.receivers = response.data
        this.receivers.forEach((row, index) => {
          if (row.check) {
            setTimeout(function() {
              _self.$refs.modifyTable.toggleRowSelection(row, true)
            }, 100)
          }
        })
      })
    },
    baseConfModify(index, data, type) {
      var listQuery = { }
      var tempId = data[index].conf.id
      if (event.target.checked) {
        if (type === 'email') {
          listQuery = { id: tempId, isEmail: true }
        } else if (type === 'phone') {
          listQuery = { id: tempId, isPhone: true }
        } else if (type === 'web') {
          listQuery = { id: tempId, isWeb: true }
        }
      } else {
        if (type === 'email') {
          listQuery = { id: tempId, isEmail: false }
        } else if (type === 'phone') {
          listQuery = { id: tempId, isPhone: false }
        } else if (type === 'web') {
          listQuery = { id: tempId, isWeb: false }
        }
      }
      baseConfModify(listQuery).then(response => {
        this.baseConfList()
      })
    },
    baseConfReceiverModify(receivers) {
      const idQuery = []
      this.multiple2Selection.forEach(function(element) {
        idQuery.push(element.id)
      }, this)
      const obj = {
        confId: this.confId,
        receiverIds: idQuery.join(',')
      }
      console.log(obj)
      this.$confirm('确定要修改？', {
        type: 'warning'
      })
      .then(_ => {
        baseConfReceiverModify(obj).then(response => {
          this.creatDialogVislble = false
          this.baseConfList()
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
        })
      })
    .catch(_ => {})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.pdisabled = false
      } else {
        this.pdisabled = true
      }
      console.log(this.multipleSelection, 'multipleSelection')
    },
    handle2SelectionChange(val) {
      if (val.length < 1) {
        this.saveDisabled = true
      } else {
        this.saveDisabled = false
      }
      this.multiple2Selection = val
    }
  }
}
</script>

<style lang="scss">
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
        }
    }
}

.divMain{
    padding: 15px;
    td{
      border:0px;
    }
}
.divTitle{
    padding-left: 16px;
    height: 40px;
    line-height:40px;
    border-left: 3px solid #778;
    background-color: #F4F5F9;
}

.thead{
  background-color: #ffffff;
  th{
    background-color: #ffffff;
  }
  .el-table__body-wrapper{
    display: none;
  }
  .el-table__header-wrapper{
    .cell{
      background-color: #ffffff;
    }
  }
}

.modifyTable{
  th{
     padding: 8px 8px;
     font-weight: normal;
     color: #999;
     border-bottom: 1px solid #E1E6EB;
     background-color: #F5F6FA;
     .cell{
         background-color: #F5F6FA;
      }
  }
}

.msgReceivedBn{
  color: #333;
  border: 1px solid #ddd;
  background-color: #F7F7F7;
}

</style>


